<template>
	<view>
		<tt-bar title="请假学员" leftIcon="icon-back"></tt-bar>
		<view class="tabBarHead">
			<text :class="[isToday ? 'active' : '']" @tap="toggleIsToday(true)">今日请假</text>
			<text :class="[isToday ? '' : 'active']" @tap="toggleIsToday(false)">全部请假</text>
		</view>
		<scroll-view :scroll-y="true" :style="{ height: scHeight + 'px' }" @scrolltolower="getData">
			<view class="studentList">
				<block v-if="isToday">
					<block v-for="(item,index) in todayList">
						<view class="studentRow" :key="index">
							<view class="row">
								<text>学员姓名 {{item.memberName}}</text>
								<text class="status">{{statusArr[item.status]}}</text>
							</view>
							<text>所在班级：{{item.className}}</text>
							<text>开始日期：{{item.begin}}</text>
							<text>结束日期：{{item.end}}</text>
							<text>请假时段：{{item.time}}</text>
						</view>
					</block>
					<block v-if="!todayList.length">
						<emptyBox></emptyBox>
					</block>
				</block>
				<block v-if="!isToday">
					<block v-for="(item,index) in allList">
						<view class="studentRow" :key="index">
							<view class="row">
								<text>学员姓名 {{item.memberName}}</text>
								<text class="status">{{statusArr[item.status]}}</text>
							</view>
							<text>所在班级：{{item.className}}</text>
							<text>开始日期：{{item.begin}}</text>
							<text>结束日期：{{item.end}}</text>
							<text>请假时段：{{item.time}}</text>
						</view>
					</block>
					<block v-if="!allList.length">
						<emptyBox></emptyBox>
					</block>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import ttBar from '../../components/ttBar/ttBar.vue';
import API from "../../common/api.js";
import TL from "../../common/tool.js";
import emptyBox from "../../components/emptyBox/emptyBox.vue";
export default {
	components: {
		ttBar,
		emptyBox
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
		})
	},
	data() {
		return {
			page_no:1,
			hasNext:true,
			isToday: true,
			scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(180),
			allList:[],
			todayList:[],
			statusArr:['待处理','已批准','已拒绝']
		};
	},
	methods: {
		toggleIsToday(e) {
			this.isToday = e;
		},
		getData() {
			if(this.hasNext){
					API.apiGetLeaveList({
						teacherId:this.userInfo.userId,
						page_no:this.page_no,
						page_size:10
					}).then(res=>{
						if(res.data.result==1){
							this.allList=this.allList.concat(res.data.data.items);
							this.hasNext=res.data.data.hasNext;
							this.page_no=res.data.data.nextPage;
							if(res.data.data.items.length){
								let _todayStr=TL.datePattern(new Date(),'yyyy-MM-dd');
								let _arr=res.data.data.items.filter(x=>{
									return TL.dateStrToNum(x.createTime)==TL.dateStrToNum(_todayStr)
								})
								this.todayList=this.todayList.concat(_arr);
							}
						}
					})
			}else{
				uni.showToast({
					title: '没有更多的数据',
					icon: 'none'
				});
			}
		}
	},
	onLoad() {
		this.getData();
	}
};
</script>

<style lang="less">
page {
	background-color: #f6f6f6;
}
.tabBarHead {
	height: 90upx;
	background-color: #ffffff;
	border-top: 2upx solid #f0f0f0;
	border-bottom: 2upx solid #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	text {
		font-size: 32upx;
		height: 100%;
		border-bottom: 4upx solid rgba(0, 0, 0, 0);
		line-height: 78upx;
	}
	.active {
		color: #f79f21;
		border-bottom: 4upx solid #f79f21;
	}
}
.studentList {
	display: flex;
	flex-direction: column;
	padding: 18upx;
	.studentRow {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		border-radius: 10upx;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		padding: 32upx 40upx;
		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16upx;
			text {
				font-size: 32upx;
				color: #3b434d;
			}
			.status {
				color: #f79f21;
				font-size: 28upx;
			}
		}
		> text {
			color: #3b434d;
			font-size: 28upx;
			margin-bottom: 10upx;
		}
	}
}
</style>
